<% cache spree_storefront_base_cache_scope.call(product) do %>
  <% if product.storefront_description.present? %>
    <% description_text = strip_tags(product.storefront_description) %>
    <div data-controller="read-more" class="py-4 flex flex-col gap-4" data-read-more-more-text-value="<%= Spree.t(:read_more) %>" data-read-more-less-text-value="Read less">
      <div class="prose product-description text-sm <%= 'product-description-truncated' if description_text.size > 250 %>" data-read-more-target="content">
        <%= raw(product.storefront_description) %>
      </div>
      <% if description_text.size > 250 %>
        <%= button_tag Spree.t(:read_more), type: 'button', data: { action: "read-more#toggle" }, class: "font-bold underline text-sm" %>
      <% end %>
    </div>
  <% end %>

  <div class="st-accordion" data-controller="accordion">
    <% short_description = product.property('short_description') %>

    <% if short_description.present? %>
      <div class="product-property py-4 border-b border-default">
        <%= link_to '#property_details', class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
          <%= Spree.t(:details) %>
          <%= render 'spree/shared/icons/chevron_down' %>
        <% end %>
        <div class="text-sm st-accordion__content" data-accordion-id="property_details">
          <div class="pt-4"><%= product.description %></div>
        </div>
      </div>
    <% end %>

    <% shipping_policy = current_store.customer_shipping_policy %>
    <% if shipping_policy.present? %>
      <div class="product-property py-4 border-b border-default">
        <%= link_to "#property_shipping_policy", class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
          <%= Spree.t(:shipping_policy) %>
          <%= render 'spree/shared/icons/chevron_down' %>
        <% end %>
        <div class="text-sm st-accordion__content" data-accordion-id="property_shipping_policy">
          <div class="pt-4"><%= shipping_policy %></div>
        </div>
      </div>
    <% end %>

    <% product_properties(product).each do |product_property| %>
      <div class="product-property py-4 border-b border-default">

        <%= link_to "#property_#{product_property.id}", class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
          <%= product_property.property.presentation %>
          <%= render 'spree/shared/icons/chevron_down' %>
        <% end %>
        <div class="text-sm st-accordion__content" data-accordion-id="property_<%= product_property.id %>">
          <div class="pt-4"><%= simple_format(product_property.value) %></div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>
